<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<style>
    tr:nth-child(odd) {
        background: rgba(0, 0, 0, .1);
    }

    tr:nth-child(1) {
        background: blue;
    }

    tr:nth-child(even) {
        background: rgba(0, 0, 0, .3);
    }

    tr {
        width: 100%;
        height: 50px;
    }

    td {
        text-align: center;
        width: 150px;
    }

    tr:hover td {
        background: skyblue;
    }

    #myDiv {
        width: 900px;
        margin: 40px auto 0px;
    }

    #myLink {
        width: 150px;
        height: 50px;
        margin: 10px auto 0px;
        border-radius: 10px;
        line-height: 50px;
        text-align: center;
    }

    #myLink:hover {
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
        transform: translate(-1px, -2px);
    }

    #myLink > a {
        text-decoration: none;
        color: skyblue;
    }

    #updateStu {
        width: 200px;
        height: 200px;
        background: skyblue;
        position: absolute;
        left: 42%;
        top: 40px;
    }

    #updateStu {
        width: 300px;
        height: 280px;
        background: lightgoldenrodyellow;
        margin: 50px auto 0px;
    }

    form {
        width: 222px;
        height: 250px;
        margin: 0px auto 0px;
        padding-top: 10px;
    }

    form > div {
        margin-top: 20px;
    }

    #wu {
        width: 50px;
        height: 60px;
        margin: 20px auto 0;
    }

    #updateStu > div {
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background: red;
        float: right;
    }
</style>
<body>

<div id="myDiv">
    <div id="ss">
        <input type="text" id="myId"/>
        <button @click="queryById">搜索</button>
    </div>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>生日</td>
            <td>操作</td>
        </tr>
        <tr v-for="stu in studentList">
            <td>{{stu.id}}</td>
            <td>{{stu.name}}</td>
            <td>{{stu.sex}}</td>
            <td>{{stu.age}}</td>
            <td>{{stu.birthday}}</td>
            <td>
                <button @click="change(stu.id)">编辑</button>
                <div v-show="flag" id="updateStu">
                    <div @click="flag=false">X</div>
                    <form action="updateStudent" method="get">
                        <div>编号：<input type="text" name="id" readonly v-model="id"/>
                        </div>
                        <div>姓名：<input type="text" name="name" required placeholder="请输入姓名" autocomplete="off"/>
                        </div>
                        <div id="er">
                            性别：<input type="radio" name="sex" value="男" checked/>男
                            <input type="radio" name="sex" value="女"/>女
                        </div>
                        <div id="san">年龄：<input type="text" name="age" required placeholder="请输入年龄" autocomplete="off"/>
                        </div>
                        <div id="si">生日：<input type="date" name="birthday" required/></div>
                        <div id="wu"><input type="submit" value="提交"/></div>
                    </form>
                </div>
                <button @click="delStudent(stu.id)">删除</button>
            </td>
        </tr>
    </table>
</div>
<div id="myLink"><a href="insertStudent.html">添加学生信息</a></div>
</body>
<script>
    const myModel = {
        studentList: [],
        flag: false,
        id: ''
    };
    new Vue({
        el: "#myDiv",
        data: myModel,
        methods: {
            delStudent(id) {
                $.ajax({
                    url: 'deleteStu',
                    type: 'get',
                    data: {
                        id: id
                    },
                    datatype: 'JSON',
                    success(result) {
                        myModel.studentList = result;
                    },
                    error() {

                    },
                    timeout: 2000
                })
            },
            change(id) {
                myModel.id = id;
                myModel.flag = true;
            },
            queryById(){
                console.log($("#myId").val());
                $.ajax({
                    url: 'queryStudentById',
                    type: 'get',
                    data: {
                        id: $("#myId").val()
                    },
                    datatype: 'JSON',
                    success(result) {
                        myModel.studentList = result;
                    },
                    error() {

                    },
                    timeout: 5000
                })
            }
        }
    });
    $.ajax({
        url: 'allStudent',
        type: 'get',
        data: '',
        datatype: 'json',
        success(result) {
            myModel.studentList = result;
            console.log(result);
        },
        error() {
            console.log("NOT OK");
        },
        timeout: 5000
    });
</script>
</html>